import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { Card, Row, Col, Statistic, Table, Button, Space, Tag } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, UserOutlined, ShoppingOutlined, DollarOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import './Dashboard.css';

const Dashboard: React.FC = () => {
    const { t } = useTranslation();

    const stats = [
        { title: t('dashboard.totalUsers'), value: 12345, change: 12, trend: 'up', icon: <UserOutlined /> },
        { title: t('dashboard.totalOrders'), value: 8765, change: 8, trend: 'up', icon: <ShoppingOutlined /> },
        { title: t('dashboard.totalRevenue'), value: 234567, change: 15, trend: 'up', icon: <DollarOutlined /> },
        { title: t('dashboard.activeUsers'), value: 3456, change: -2, trend: 'down', icon: <ThunderboltOutlined /> }
    ];

    // ECharts 面积图配置
    const areaChartOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['用户', '订单']
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '用户',
                type: 'line',
                smooth: true,
                areaStyle: {},
                data: [4000, 3000, 2000, 2780, 1890, 2390]
            },
            {
                name: '订单',
                type: 'line',
                smooth: true,
                areaStyle: {},
                data: [2400, 1398, 9800, 3908, 4800, 3800]
            }
        ]
    };

    // ECharts 柱状图配置
    const barChartOption = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '访问量',
                type: 'bar',
                data: [120, 200, 150, 80, 70, 110, 130]
            }
        ]
    };

    // ECharts 饼图配置
    const pieChartOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '设备分布',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 400, name: '移动端' },
                    { value: 300, name: '桌面端' },
                    { value: 200, name: '平板端' },
                    { value: 100, name: '其他' }
                ]
            }
        ]
    };

    const recentOrders = [
        { id: '#001', customer: '张三', amount: 299, status: '已完成', date: '2024-01-15' },
        { id: '#002', customer: '李四', amount: 599, status: '处理中', date: '2024-01-15' },
        { id: '#003', customer: '王五', amount: 199, status: '待支付', date: '2024-01-14' },
        { id: '#004', customer: '赵六', amount: 899, status: '已完成', date: '2024-01-14' }
    ];

    const orderColumns = [
        {
            title: '订单号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '客户',
            dataIndex: 'customer',
            key: 'customer',
        },
        {
            title: '金额',
            dataIndex: 'amount',
            key: 'amount',
            render: (amount: number) => `¥${amount}`,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: string) => {
                const color = status === '已完成' ? 'green' : status === '处理中' ? 'blue' : 'orange';
                return <Tag color={color}>{status}</Tag>;
            },
        },
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
    ];

    return (
        <div className="dashboard">
            <div className="dashboard-header">
                <h1>{t('dashboard.title')}</h1>
                <p>{t('dashboard.welcome')}</p>
            </div>

            {/* 统计卡片 */}
            <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                {stats.map((stat, index) => (
                    <Col xs={24} sm={12} lg={6} key={index}>
                        <Card>
                            <Statistic
                                title={stat.title}
                                value={stat.value}
                                prefix={stat.icon}
                                suffix={
                                    <span style={{ color: stat.trend === 'up' ? '#52c41a' : '#ff4d4f' }}>
                                        {stat.trend === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                                        {Math.abs(stat.change)}%
                                    </span>
                                }
                            />
                        </Card>
                    </Col>
                ))}
            </Row>

            {/* 图表区域 */}
            <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                <Col xs={24} lg={16}>
                    <Card title={t('dashboard.dataTrend')} extra={
                        <select className="chart-select">
                            <option>最近6个月</option>
                            <option>最近3个月</option>
                            <option>最近1年</option>
                        </select>
                    }>
                        <ReactECharts
                            option={areaChartOption}
                            style={{ height: '300px', width: '100%' }}
                        />
                    </Card>
                </Col>
                <Col xs={24} lg={8}>
                    <Card title={t('dashboard.deviceDistribution')}>
                        <ReactECharts
                            option={pieChartOption}
                            style={{ height: '250px', width: '100%' }}
                        />
                    </Card>
                </Col>
            </Row>

            {/* 第二行图表 */}
            <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                <Col xs={24} lg={16}>
                    <Card title={t('dashboard.weeklyVisits')} extra={
                        <select className="chart-select">
                            <option>本周</option>
                            <option>上周</option>
                            <option>本月</option>
                        </select>
                    }>
                        <ReactECharts
                            option={barChartOption}
                            style={{ height: '300px', width: '100%' }}
                        />
                    </Card>
                </Col>
                <Col xs={24} lg={8}>
                    <Card title={t('dashboard.quickStats')}>
                        <Row gutter={[16, 16]}>
                            <Col span={12}>
                                <Statistic title={t('dashboard.systemRunning')} value={98.5} suffix="%" />
                            </Col>
                            <Col span={12}>
                                <Statistic title={t('dashboard.avgResponseTime')} value={1.2} suffix="s" />
                            </Col>
                            <Col span={12}>
                                <Statistic title={t('dashboard.securityLevel')} value={100} suffix="%" />
                            </Col>
                            <Col span={12}>
                                <Statistic title={t('dashboard.storageUsage')} value={75} suffix="%" />
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>

            <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                <Col xs={24} lg={16}>
                    <Card
                        title={t('dashboard.recentOrders')}
                        extra={<Button type="link">{t('dashboard.viewAll')}</Button>}
                    >
                        <Table
                            dataSource={recentOrders}
                            columns={orderColumns}
                            pagination={false}
                            size="small"
                        />
                    </Card>
                </Col>
                <Col xs={24} lg={8}>
                    <Card title={t('dashboard.quickActions')}>
                        <Space direction="vertical" style={{ width: '100%' }}>
                            <Button
                                type="primary"
                                block
                                icon={<UserOutlined />}
                                onClick={() => console.log('添加用户')}
                            >
                                {t('dashboard.addUser')}
                            </Button>
                            <Button
                                block
                                icon={<ShoppingOutlined />}
                                onClick={() => console.log('添加产品')}
                            >
                                {t('dashboard.addProduct')}
                            </Button>
                            <Button
                                block
                                icon={<DollarOutlined />}
                                onClick={() => console.log('生成报告')}
                            >
                                {t('dashboard.generateReport')}
                            </Button>
                            <Button
                                block
                                icon={<ThunderboltOutlined />}
                                onClick={() => console.log('系统设置')}
                            >
                                {t('dashboard.systemSettings')}
                            </Button>
                        </Space>
                    </Card>
                </Col>
            </Row>

            <Row gutter={[16, 16]}>
                <Col span={24}>
                    <Card title={t('dashboard.systemStatus')}>
                        <Row gutter={[16, 16]}>
                            <Col xs={24} sm={12} md={6}>
                                <Statistic
                                    title={t('dashboard.serverStatus')}
                                    value={t('dashboard.online')}
                                    valueStyle={{ color: '#52c41a' }}
                                />
                            </Col>
                            <Col xs={24} sm={12} md={6}>
                                <Statistic
                                    title={t('dashboard.databaseConnection')}
                                    value={t('dashboard.normal')}
                                    valueStyle={{ color: '#52c41a' }}
                                />
                            </Col>
                            <Col xs={24} sm={12} md={6}>
                                <Statistic
                                    title={t('dashboard.storageSpace')}
                                    value={75}
                                    suffix={`% ${t('dashboard.storageUsed')}`}
                                />
                            </Col>
                            <Col xs={24} sm={12} md={6}>
                                <Statistic
                                    title={t('dashboard.memoryUsage')}
                                    value="2.1GB / 8GB"
                                />
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default Dashboard;

